<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>02_事件操作-click和on的区别</title>
</head>
<body>

  <ul id="list" class="panel">
    <li class="li-1">li-1</li>
    <li class="li-2">li-2</li>
    <li class="li-3">li-3</li>
    <li class="li-4">li-4</li>
    <li class="li-5">li-5</li>
  </ul>

  <button class="cancel">取消事件的监听</button>

  <script src="../libs/jquery-3.6.0.js"></script>

  <script>
    $(function () {
      // 1. on方法监听事件 ( 支持给事件添加命名空间: on-name-li )
      $('#list').on('click.on-name-li', 'li', function () {
        console.log($(this).text())
      })

      // 2. click方法监听事件
      $('.cancel').click(function () {
        $('#list').off('click.on-name-li', 'li')
      })

    })
  </script>
  
</body>
</html>